<template>
  <div>
    <el-container>
      <el-header>
        <el-dropdown class="personalInfo" @command="this.itemChange">
          <span class="el-dropdown-link">
            {{ username }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="updatePwd">修改密码</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <!-- 添加router属性，index属性的值对应路由表中的映射名 -->
          <el-menu router class="el-menu-vertical-demo" @open="" @close="">
            <!--  -->
            <el-submenu v-show="this.isAdminShow" index="0">
              <template slot="title">
                <i class="el-icon-tickets"></i>
                <span>系统用户</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="sysUser">
                  系统用户列表
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="1" v-show="this.isUserShow">
              <template slot="title">
                <i class="el-icon-date"></i>
                <span>仓库信息</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="warehouse">
                  <!-- 可以使用router-link访问 -->
                  <!-- <router-link to="/warehouse">仓库列表</router-link> -->
                  仓库列表
                </el-menu-item>
                <el-menu-item index="warehouseArea">
                  库区列表
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="2" v-show="this.isUserShow">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>物料信息</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="material">物料列表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-document"></i>
                <span>数据图表</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="bar">各仓库总容量</el-menu-item>
                <el-menu-item index="pie">各仓库库区分布</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-main>
          <!-- 直通路由容器显示界面 -->
          <router-view />

        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style>
.personalInfo {
  margin-top: 20px;
}
</style>
<script>
import jwtDecode from 'jwt-decode'
export default {
  created() {
    //获取保存在localStorage中的token
    var token = window.localStorage.getItem("token");
    //解析token
    this.sysUser = jwtDecode(token);
    this.username =this.sysUser.suName;
    console.log(this.sysUser);

   // 如果当前是管理员，让某个模块显示
   if (this.sysUser.suRole == "ADMIN") {
      this.isAdminShow = true;
      this.isUserShow = true;
    }
    if (this.sysUser.suRole == "USER") {
      this.isUserShow = true;
    }
    // window.localStorage.setItem(k,v)
    // window.localStorage.getItem(k)
    // window.localStorage.removeItem(k)
  },
  data() {
    return {
      sysUser: {},
      suName:'',
      isAdminShow:false,//控制某个模块显示或隐藏，默认隐藏
      isUserShow:false
    }
  },
  methods: {
    itemChange(command) {
      switch (command) {
        case 'logout':
          this.$message("已退出登录")
          window.localStorage.removeItem("token")
          this.$router.replace("/")
          break;
        case 'updatePwd':
          this.$message("暂未实现")
          break;
      }
    }
  }
}
</script>  